<!--
 * new page
 * @author: xuaolei
 * @since: 2022-08-22
 * SongList.vue
-->
<script setup lang="ts">
import { useHomeStore } from "@/stores/home/home";
import { ElNotification } from "element-plus";
import { VideoPause, VideoPlay } from "@element-plus/icons-vue";

const props = defineProps({
  songList: {
    // 歌曲列表
    type: Array,
    required: true,
  },
  typeSize: {
    // 播放列表展示类型， 默认normal是歌单下的展示列表，mini是播放条下的歌曲列表的
    type: String,
    default: "normal",
  },
  stripe: {
    // 隔行变色
    type: Boolean,
    default: false,
  },
  height: {
    type: [Number, String],
    default: "auto",
  },
  // 分页加载 || 无限滚动加载
  isScroll: {
    type: Boolean,
    default: false,
  },
  offset: {
    // 若是列表有分页，偏移数量
    type: Number,
    default: 0,
  },
  pageSize: {
    // 分页 每页展示数量
    type: Number,
    default: 20,
  },
});

const curSongRef = ref(null);
const homeStore = useHomeStore();
const info = reactive({
  typeSize: props.typeSize,
  height: props.height,
  curScroll: -1 || 1,
  pageSize: props.pageSize,
  currentPage: 1,
  playing: false,
  timer: null,
});

const playList = computed(() => homeStore.playList);
const isPlayed = computed(() => homeStore.isPlayed);

onMounted(() => {
  scrollCurSong(curSongInfo);
});
// 获取歌曲列表
const list = computed(() => {
  if (!props.isScroll) {
    // 分页加载数据
    return props.songList.slice(
      (info.currentPage - 1) * info.pageSize,
      info.currentPage * info.pageSize
    );
  } else {
    return props.songList;
  }
});

const curSongSty = computed(() => {
  return `transform: translateY(${info.curScroll}px)`;
});

// 表格列表序号格式化
const indexMethod = (page: any) => {
  if (!props.isScroll) {
    return (info.currentPage - 1) * info.pageSize + page + 1 + props.offset;
  } else {
    return page + 1;
  }
};

// 列表样式
const isCurSong = computed(() => {
  return (item: any, index: number) => {
    return [
      "list-item",
      props.stripe ? (index % 2 === 0 ? "stripe" : "") : "",
      isPlayed.value && item.id === curSongInfo.value.id ? "active" : "",
      item.license || item.vip ? "disable" : "",
      item.vip ? "vip" : "",
    ];
  };
});

// 播放当前播放歌曲
const currentSong = (item: any) => {
  // 若当前唔歌曲 或者 当前播放歌曲不是本歌单显示的歌曲  立即播放当前歌单

  if (!curSongInfo.value || item.id !== curSongInfo.value.id) {
    homeStore.selectPlay([item]);
  } else {
    homeStore.SET_PLAYSTATUS(!isPlayed.value);
  }
};

// 获取当前播放音乐信息
const curSongInfo: any = computed(() => {
  return playList.value[homeStore.playIndex];
});

// 添加当前歌曲到播放列表
const addSongList = (item: any) => {
  homeStore.addList([item]);
  homeStore.SET_PLAYLISTTIPS(true);
};

// 在播放列表删除当前歌曲
const delList = (index: number) => {
  if (playList.value.length > 1) {
    playList.value.splice(index, 1);
    homeStore.SET_PLAYLIST(playList.value);
  } else {
    homeStore.SET_PLAYSTATUS(false);
    homeStore.SET_PLAYLIST([]);
  }
  ElNotification({
    title: "提示",
    message: "删除成功！",
    type: "success",
  });
};

// 滚动到当前播放音乐的位置
const scrollCurSong = (cur: any) => {
  if (props.isScroll) {
    const curIndex = props.songList.findIndex((item: any) => {
      return item.id === cur.id;
    });

    if (curIndex > 7 && curIndex < props.songList.length - 8) {
      info.curScroll = -(curIndex - 4) * 50;
    } else if (
      curIndex >= props.songList.length - 8 &&
      props.songList.length - 8 > 0
    ) {
      info.curScroll = -(props.songList.length - 8) * 50;
    } else {
      info.curScroll = 0;
    }

    const $curSongRef: any = curSongRef.value;
    $curSongRef.addEventListener(
      "wheel",
      (event: any) => {
        if (event.wheelDelta > 0 || event.detail < 0) {
          info.curScroll =
            Math.abs(info.curScroll) > 0 ? info.curScroll + 50 : 0;
        } else {
          info.curScroll =
            Math.abs(info.curScroll) < ((props.songList.length - 8) / 2) * 100
              ? info.curScroll - 50
              : info.curScroll;
        }
      },
      { passive: true }
    );
  }
};

const isShowPagination = computed(() => {
  return props.songList.length > info.pageSize && !props.isScroll;
});

// 歌曲列表分页功能
const currentChange = (page: any) => {
  info.currentPage = page;
};

watch(
  curSongInfo,
  (val) => {
    // 添加歌曲的时候，props的歌曲列表没有更新
    nextTick(() => {
      val && scrollCurSong(val);
    });
  },
  { deep: true }
);

watch(
  () => {
    return props.songList;
  },
  () => {
    info.currentPage = 1;
  }
);
</script>

<template>
  <div class="songs-list-main">
    <div class="list-header flex">
      <div class="columnIndex">序号</div>
      <div class="columnSong">歌曲</div>
      <div class="columnSinger">歌手</div>
      <div class="columnAlbum" v-if="typeSize !== 'mini'">专辑</div>
      <div class="columnTime">时长</div>
    </div>
    <div
      class="list-scroll"
      :style="{ height: height + 'px' }"
      ref="curSongRef"
    >
      <div class="list-main" :style="curSongSty">
        <div
          :class="isCurSong(item, index)"
          v-for="(item, index) in (list as any)"
          :key="item.id"
        >
          <div class="columnIndex">
            <div class="songlist-index">
              <span>{{ indexMethod(index) }}</span>
            </div>
            <div class="audio-icon">
              <div class="column" style="animation-delay: -1.2s"></div>
              <div class="column"></div>
              <div class="column" style="animation-delay: -1.5s"></div>
              <div class="column" style="animation-delay: -0.6s"></div>
            </div>

            <el-icon
              class="playicon"
              v-if="isPlayed && item.id === curSongInfo.id"
              @click="currentSong(item)"
            >
              <VideoPause></VideoPause>
            </el-icon>

            <el-icon v-else class="playicon" @click="currentSong(item)">
              <VideoPlay></VideoPlay>
            </el-icon>
          </div>
          <div class="columnSong songlist-name">
            <router-link :class="typeSize" :to="`/song/${item.id}`">
              {{ item.name }}
            </router-link>
            <template v-if="typeSize !== 'mini'">
              <router-link
                class="mv-name"
                :to="{ path: '/mvlist/mv', query: { id: item.mvId } }"
                v-if="item.mvId"
              >
                <i class="iconfont icon-mv"></i>
              </router-link>
              <!-- <i v-if="item.vip" class="iconfont icon-vip"></i> -->
              <el-icon v-if="item.vip" class="icon-vip" :size="14">VIP</el-icon>
            </template>
          </div>
          <div class="columnSinger songlist-singer">
            <!--- 返回的数据里用户的uid有可能为0 --->
            <router-link
              :to="{ path: '/singer', query: { id: author.id } }"
              class="song_name"
              v-for="(author, k) in item.singer"
              :key="author.name"
              >{{ k !== 0 ? " / " + author.name : author.name }}
            </router-link>
          </div>
          <div class="columnAlbum" v-if="typeSize !== 'mini'">
            <router-link
              class="songlist-album"
              :to="{ path: '/album', query: { id: item.album.id } }"
              v-if="item.album"
            >
              {{ item.album.name }}
            </router-link>
          </div>
          <div class="columnTime">
            <div class="songlist-time">
              {{ item.duration }}
            </div>
            <div class="songlist-oper">
              <i
                class="iconfont icon-yinle2"
                title="添加到列表"
                v-if="typeSize !== 'mini'"
                @click="addSongList(item)"
              ></i>

              <i class="iconfont icon-shoucang" style="font-size: 28px"></i>

              <!-- <el-popover placement="bottom" trigger="click" ref="popAddList">
                                <i class="iconfont icon-add-list" title="添加到歌单" slot="reference" @click="closeAddListPop"></i>
                                <add-list :tracks="item.id" @closeAddListPop="closeAddListPop"></add-list>
                            </el-popover> -->
              <!--  @click="likeSong(item)" -->
              <i
                class="iconfont icon-shanchu"
                v-if="typeSize === 'mini'"
                @click.stop="delList(index)"
              ></i>
              <!--  @click.stop="delList(index)" -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination" v-if="isShowPagination">
      <el-pagination
        @current-change="currentChange"
        :page-size="info.pageSize"
        :current-page.sync="info.currentPage"
        layout="prev, pager, next"
        :total="songList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list-header {
  display: flex;
  line-height: 50px;
  font-weight: bold;
  color: var(--el-text-color-regular);
  font-size: var(--el-font-size-base);
}

.columnIndex {
  width: 80px;
  line-height: 50px;
  padding-left: 10px;
}

.columnSong {
  display: flex;
  flex: 2;
  width: 0;
  padding-right: 10px;
  overflow: hidden;
  align-items: center;
}

.columnSinger {
  flex: 1;
  width: 0;
  padding-right: 10px;
  overflow: hidden;

  a {
    color: var(--el-text-color-regular);
  }
}

.columnAlbum {
  flex: 1;
  width: 0;
}

.columnTime {
  width: 100px;
  padding-right: 10px;
  text-align: right;
  color: var(--el-text-color-regular);
}

.audio-icon {
  display: none;
  width: 20px;
  height: 18px;
  margin: 16px 2px;
  overflow: hidden;

  .column {
    width: 2px;
    height: 100%;
    margin-left: 2px;
    background-color: var(--el-color-primary);
    -webkit-animation: play 0.9s linear infinite alternate;
    animation: play 0.9s linear infinite alternate;
  }
}

.list-scroll {
  -moz-user-select: none;
  /*火狐*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -ms-user-select: none;
  /*IE10*/
  -khtml-user-select: none;
  /*早期浏览器*/
  user-select: none;
  overflow-y: hidden;
}

.list-main {
  transition: transform 0.3s;
  font-size: var(--el-font-size-base);
}

.list-item {
  display: flex;
  line-height: 0;
  border-radius: 20px;

  .el-icon {
    margin-left: 10px;
    font-size: 22px;
    cursor: pointer;
    vertical-align: middle;

    &:hover {
      color: var(--el-color-primary);
    }
  }

  .icon-mv {
    font-size: 14px;
  }

  .songlist-index {
    display: inline-block;
    width: 24px;
    text-align: center;
  }

  .playicon {
    cursor: pointer;
    margin-top: 15px;
    display: none;
    margin-left: 0;
    color: var(--el-text-color-regular);
  }

  .songlist-name {
    a {
      display: inline-block;
      max-width: 80%;
      line-height: 50px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      vertical-align: top;
      color: var(--el-text-color-primary);
    }

    .mini {
      max-width: 100%;
    }

    .el-icon:hover {
      color: var(--el-color-primary) !important;

      cursor: pointer;
    }
  }

  .songlist-singer,
  .songlist-album {
    display: inline-block;
    max-width: 100%;
    line-height: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--el-text-color-primary);
  }

  .songlist-time {
    line-height: 50px;
  }

  .songlist-oper {
    display: none;
    line-height: 50px;

    .iconfont {
      font-weight: 100;
      font-size: 25px;
      padding: 0 2px;
      cursor: pointer;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  &.stripe {
    background: var(--el-bg-color-page);
  }

  &.active {
    background: var(--el-bg-color-page);

    .songlist-index,
    .playicon {
      display: none;
    }

    .audio-icon {
      display: flex;
    }

    &:hover {
      .playicon {
        display: block;
        color: var(--el-color-primary);
      }

      .audio-icon {
        display: none;
      }
    }
  }

  &:hover {
    background: var(--el-bg-color-page);

    .songlist-time,
    .songlist-index {
      display: none;
    }

    .songlist-oper {
      display: flex;
      justify-content: flex-end;
    }

    .playicon {
      display: block;
    }
  }

  .icon-vip {
    font-size: 30px;
    color: var(--el-color-error);
  }

  &.disable {
    color: #ccc;

    a {
      color: #ccc;
    }

    .playicon,
    .songlist-oper {
      display: none;
    }

    .songlist-index,
    .songlist-time {
      display: block;
    }
  }

  &.vip {
    color: var(--el-color-error);

    a {
      color: var(--el-color-error);
    }
  }
}

.song-list {
  .songlist-singer {
    display: inline-block;
    width: 100px;
    height: 23px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .songlist-name {
    width: 210px;

    a {
      display: inline-block;
      max-width: 185px;
      height: 23px;
      margin-right: 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: var(--el-text-color-primary);
    }

    i:hover {
      color: var(--el-text-color-primary);
      cursor: pointer;
    }
  }

  .songlist-album {
    display: inline-block;
    width: 95%;
    height: 23px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .songlist-oper {
    display: none;

    .iconfont {
      margin-left: 15px;
      font-size: 22px;
      cursor: pointer;

      &:hover {
        color: var(--el-text-color-primary);
      }
    }
  }
}

.pagination {
  padding: 30px 0;
  text-align: center;
}

@-webkit-keyframes play {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  to {
    -webkit-transform: translateY(75%);
    transform: translateY(75%);
  }
}

@keyframes play {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  to {
    -webkit-transform: translateY(75%);
    transform: translateY(75%);
  }
}
</style>
